<div class="modal-resource-action">
  <!-- Use a form so that the enter key submits when typing a project name to confirm. -->
  <form>
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close" ng-click="cancel()">
        <span class="pficon pficon-close"></span>
      </button>
      <h1 class="modal-title">Confirm Delete</h1>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete the {{typeDisplayName || (kind | humanizeKind)}}
        '<strong>{{displayName ? displayName : resourceName}}</strong>'?</p>

      <p>
        <span ng-if="kind === 'DeploymentConfig'">
          This will delete the deployment config, all rollout history, and any running pods.
        </span>

        <span ng-if="kind === 'Deployment'">
          This will delete the deployment, all rollout history, and any running pods.
        </span>

        <span ng-if="kind === 'ReplicationController' || kind === 'ReplicaSet' || kind === 'StatefulSet'">
          This will delete the {{typeDisplayName || (kind | humanizeKind)}} and any running pods.
        </span>

        <span ng-if="kind === 'ServiceInstance'">
          {{displayName ? displayName : resourceName}} and its data will no longer be available to your applications.
        </span>

        <span ng-if="isProject">
          This will <strong>delete all resources</strong> associated with the
          project {{displayName ? displayName : resourceName}}.
        </span>

        <strong>It cannot be undone.</strong> Make sure this is something you really want to do!
      </p>

      <div ng-show="typeNameToConfirm">
        <p>Type the name of the {{typeDisplayName || (kind | humanizeKind)}} to confirm.</p>
        <p>
          <label class="sr-only" for="resource-to-delete">{{typeDisplayName || (kind | humanizeKind)}} to delete</label>
          <input
              ng-model="confirmName"
              id="resource-to-delete"
              type="text"
              class="form-control input-lg"
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              autofocus>
        </p>
      </div>

      <!--
        If this is a pod, give the user the option of deleting it immediately with no grace period.
      -->
      <div ng-if="kind === 'Pod'" class="checkbox">
        <label>
          <input type="checkbox" ng-model="options.deleteImmediately">
          Delete pod immediately without waiting for the processes to terminate gracefully
        </label>
      </div>

      <!--
        If this is a deployment config or replication controller with associated HPAs, prompt to
        delete the HPAs as well.
      -->
      <div ng-if="hpaList.length > 0">
        <p>
          <span ng-if="hpaList.length === 1">
            This resource has an autoscaler associated with it.
            It is recommended you delete the autoscaler with the resource it scales.
          </span>
          <span ng-if="hpaList.length > 1">
            This resource has autoscalers associated with it.
            It is recommended you delete the autoscalers with the resource they scale.
          </span>
        </p>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="options.deleteHPAs">
            Delete
            <span ng-if="hpaList.length === 1">
              Horizontal Pod Autoscaler '<strong>{{hpaList[0].metadata.name}}</strong>'
            </span>
            <span ng-if="hpaList.length > 1">
              {{hpaList.length}} associated Horizontal Pod Autoscalers
            </span>
          </label>
        </div>
      </div>

    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button" ng-click="cancel();">Cancel</button>
      <button ng-disabled="typeNameToConfirm && confirmName !== resourceName && confirmName !== displayName" class="btn btn-danger" type="submit" ng-click="delete();">Delete</button>
    </div>
  </form>
</div>
